﻿


@using DAL;
@using DataProj.Areas.BackSys.ServiceTools;

@{
    ViewBag.Title = "投诉管理";
    Layout = "../Shared/_LayoutBase.cshtml";
    string loginType = MySession.GetSession("loginType");
    //int totalPage = Convert.ToUInt16(MySession.GetSession("totalPage"));
    //int currentPage = Convert.ToUInt16(MySession.GetSession("currentPage"));
    //IList<ComplaintBag> complaints = ViewBag.ComplaintBags;
    //int rows = Convert.ToInt16(MySession.GetSession("complaintRows"));
    //int rows = Convert.ToUInt16(MySession.GetSession("rows"));
    //string action = loginType.Equals("用户") ? "reply" : "info";
}
@section CssLink{


}

<div id="app">
    <!-- page heading start-->
    <div class="page-heading">
        <h3>
            投诉数据
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="">物流管理系统</a>
            </li>
            <li>
                <a href="">投诉管理</a>
            </li>
            <li class="active"> 投诉数据表 </li>
        </ul>
    </div>
    <!-- page heading end-->
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">

                    <header class="panel-heading">
                        投诉数据表
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <table class="display table table-bordered table-striped" >
                                <thead>
                                    <tr>

                                        <th>投诉单号</th>
                                        <th>投诉主题</th>
                                        <th>投诉内容</th>
                                        <th>身份证号</th>
                                        <th>联系电话</th>
                                        <th>投诉人姓名</th>
                                        <th>上传时间</th>
                                        <th>回复</th>
                                        <th>回复时间</th>
                                        <th>快递单号</th>
                                        <th>快递登记时间</th>
                                        <th>快递更新时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="table_body">
                                  
                                        <tr v-for="complaint in complaints" class="gradeA">
                                            <td class="center hidden-phone">{{complaint.ID}}</td>
                                            <td class="center hidden-phone">{{complaint.Title}} </td>
                                            <td class="center hidden-phone">{{complaint.Info}}</td>
                                            <td class="center hidden-phone">{{complaint.IDCard}}</td>
                                            <td class="center hidden-phone">{{complaint.Phone}}</td>
                                            <td class="center hidden-phone">{{complaint.TrueName}}</td>
                                            <td class="center hidden-phone">{{formatDateTime2(complaint.SubmitTime)}}</td>
                                            <td class="center hidden-phone">{{complaint.ReplyInfo}}</td>
                                            <td class="center hidden-phone">{{formatDateTime2(complaint.ReplyTime)}}</td>
                                            <td class="center hidden-phone">{{complaint.BagID}}</td>
                                            <td class="center hidden-phone">{{formatDateTime2(complaint.AddTime)}}</td>
                                            <td class="center hidden-phone">{{formatDateTime2(complaint.UpdateTime)}}</td>
                                            <td class="center hidden-phone">
                                                <button  class="btn btn-default" type="button" data-toggle="modal" data-target="#dispModal" v-on:click="get_info(complaint.ID,'r')">查看</button>
                                                @if (loginType == "用户")
                                                {
                                                    <button  class="btn btn-info" type="button" data-toggle="modal" data-target="#updateModal" v-on:click="get_info(complaint.ID,'w')">
                                                        修改
                                                    </button>
                                                }
                                                else
                                                {
                                                    <button  class="btn btn-info" type="button" data-toggle="modal" data-target="#updateModal" v-on:click="get_info(complaint.ID,'w')">
                                                        回复
                                                    </button>
                                                }

                                                <button  class="btn btn-danger" type="button" data-toggle="modal" data-target="#delModal" v-on:click="delete_info(complaint.ID)">删除</button>
                                            </td>
                                        </tr>


                                </tbody>

                            </table>
                            <ul class="pagination pull-right">
                                <li v-if="page<=1" class="disabled"><a>&laquo;</a></li>
                                <li v-else><a href="" v-on:click.prevent="changePage(page-1)">&laquo;</a></li>
                                <li v-for="i in totalPages"><a href="" v-on:click.prevent="changePage(i)">{{i}}</a></li>
                                <li v-if="page>=totalPages" class="disabled"><a>&raquo;</a></li>
                                <li v-else><a href="" v-on:click.prevent="changePage(page+1)">&raquo;</a></li>

                            </ul>
                        </div>

                    </div>

                    </section>  
            </div>
            <!-- 模态框示例（Modal） -->
            <form method="post" action="" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    投诉单详细信息
                                </h4>
                            </div>
                            <div class="modal-body">
                                    <div class="form-group">
                                        <label for="user_id" class="col-sm-3 control-label">投诉单号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="ID" name="user_id" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname" class="col-sm-3 control-label">投诉主题</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="Title" name="Title" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname" class="col-sm-3 control-label">投诉内容</label>
                                        <div class="col-sm-9">
                                            @if (loginType.Equals("用户"))
                                            {
                                                <textarea class="form-control" name="remark" v-model="Info">  </textarea>
                                            }
                                            else
                                            {
                                                <textarea class="form-control" name="remark" v-model="Info" disabled="">  </textarea>
                                            }
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">身份证号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="IDCard" name="GetPhone" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">联系电话</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="Phone" name="GetAddress" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">投诉人姓名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="TrueName" name="TrueName" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">上传时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="SubmitTime" name="SubmitTime" disabled="">

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">回复</label>
                                        <div class="col-sm-9">
                                            @if (loginType.Equals("用户"))
                                            {
                                                <textarea class="form-control" name="remark" v-model="ReplyInfo"  disabled=""></textarea>
                                            }
                                            else
                                            {
                                                <textarea class="form-control" name="remark" v-model="ReplyInfo" ></textarea>
                                            }
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">回复时间</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" name="remark" v-model="ReplyTime" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递单号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="BagID" name="BagID" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递登记时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="AddTime" name="AddTime" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递更新时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="UpdateTime" name="UpdateTime" disabled="">
                                        </div>
                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button  type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>
                                <button type="button" v-on:click="check_form('update')" class="btn btn-primary">
                                    提交
                                </button><span id="tip"> </span>

                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </form>

            <!-- 模态框示例（Modal） -->
            <form method="post" action="" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
                <div class="modal fade" id="dispModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    投诉单详细信息
                                </h4>
                            </div>
                            <div class="modal-body">
                                    <div class="form-group">
                                        <label for="user_id" class="col-sm-3 control-label">投诉单号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="ID" name="user_id" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname" class="col-sm-3 control-label">投诉主题</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="Title" name="Title" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname" class="col-sm-3 control-label">投诉内容</label>
                                        <div class="col-sm-9">

                                            <textarea class="form-control" name="remark" v-model="Info"  disabled="">
                                </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">身份证号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="IDCard" name="GetPhone" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">联系电话</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="Phone" name="GetAddress" disabled="">

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">投诉人姓名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="TrueName" name="TrueName" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">上传时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="SubmitTime" name="SubmitTime" disabled="">

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">回复</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" name="remark" v-model="ReplyInfo"  disabled="">
                                </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">回复时间</label>
                                        <div class="col-sm-9">

                                            <input type="text" class="form-control" v-model="ReplyTime" name="ReplyTime" disabled="">

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递单号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="BagID" name="BagID" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递登记时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="AddTime" name="AddTime" disabled="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label">快递更新时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="UpdateTime" name="UpdateTime" disabled="">
                                        </div>
                                    </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </form>

            <!-- 模态框示例（Modal） -->
            <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
                <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    快件信息删除确认
                                </h4>
                            </div>
                            <div class="modal-body">
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label center ">确认要删除吗?</label>
                                        @*<div class="col-sm-9">
                                                <input type="text" class="form-control" id="update_updateDate" name="BagID">
                                            </div>*@
                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button  type="button" class="btn btn-default" data-dismiss="modal">
                                    取消
                                </button>
                                <!-- <button type="button" onclick="trigger_delete()" class="btn btn-primary" data-dismiss="modal">
                                    确认
                                </button><span id="tip"> </span> -->
                                <button type="button" v-on:click="check_form('delete')" class="btn btn-primary">
                                    提交
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </form>
            <input id="loginType" value="@loginType" style="visibility:hidden">
        </div>
    </div>

</div>

        @section JavascriptLink{

        }
        @section Javascript{

            <script>
                 var vm = new Vue({
                el: "#app",
               data: {
                   complaints: [],
                   page: 1,
                   totalPages: 1,
                   action:'kepp',
                   ID: '',
                   UserName: '',
                   UserPass: '',
                   TrueName: '',
                   Phone: '',
                   IDCard: '',
                   AddTime: '',
                   UpdateTime: '',
                   Address:'',
                   Email: '',
                   ContactAddress: '',
                   Title:'',
                   Info: '',
                   SubmitTime: '',
                   ReplyInfo: '',
                   ReplyTime: '',
                   BagID:'',

                },
               methods: {

                   formatDateTime : function (str) {
                       if (!str ) return str;
                       var now = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
                       var year = now.getFullYear();  //取得4位数的年份
                       var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                       var date = now.getDate();      //返回日期月份中的天数（1到31）
                       var hour = now.getHours();     //返回日期中的小时数（0到23）
                       var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                       var second = now.getSeconds(); //返回日期中的秒数（0到59）
                       return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
                   },
                    formatDateTime2:function(str) {
                        if (!str ) return str;
                        //console.log(str);
                        var now = new Date(str);
                        var year = now.getFullYear();  //取得4位数的年份
                        var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                        /*   if (month < 10) month = '0' + month;*/
                        var date = now.getDate();      //返回日期月份中的天数（1到31）
                        //if (date < 10) date = '0' + date;
                        var hour = now.getHours();     //返回日期中的小时数（0到23）
                        //if (hour < 10) hour = '0' + hour;
                        var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                        if (minute < 10) minute = '0' + minute;
                        var second = now.getSeconds(); //返回日期中的秒数（0到59）
                        if (second < 10) second = '0' + second;
                        return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
                    },


                    delete_info: function (id) {
                        this.ID = id;


                        },
                                // 编辑表单
                    get_info: function (id, type) {
                            //console.log('传入的id为:' + id + '.类型' + typeof (id));
                            var sendData = new FormData();
                            sendData.append('ID', id);
                            sendData.append('Action', $('#act').val());

                            if (id == null) {
                                alert('Error！');
                                return false;
                            }
                            id = id.toString();

                            axios({
                                method: "post",
                                data: sendData,
                                responseType: 'json',
                                // `transformRequest` 允许在向服务器发送前，修改请求数据
                                // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                                // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("GetItemByID", "Complaint")"

                            }).then((data) => {
                                //console.log(data);
                                // 解析json数据
                                //var data = data;
                                //var data_obj = eval("(" + data + ")");
                                // 将JSON编码的字符串转换为JS对象

                                var data_obj = JSON.parse(data.data);
                                //tool =  new datesFn();
                                //console.log(typeof (data_obj.SendDate));
                                // 赋值
                                vm.ID = removeNullOrUndefined(data_obj.ID);
                                vm.UserName = data_obj.UserName;
                                vm.UserPass = data_obj.UserPass;
                                vm.TrueName = removeNullOrUndefined(data_obj.TrueName);
                                vm.Phone = removeNullOrUndefined(data_obj.Phone);
                                vm.IDCard = removeNullOrUndefined(data_obj.IDCard);
                                vm.Address = data_obj.ContactAddress;
                                vm.Email = data_obj.Email;
                                vm.AddTime = this.formatDateTime(removeNullOrUndefined(data_obj.AddTime));
                                vm.UpdateTime = this.formatDateTime(removeNullOrUndefined(data_obj.UpdateTime));
                                vm.SubmitTime = this.formatDateTime(removeNullOrUndefined(data_obj.SubmitTime));
                                vm.ReplyTime = this.formatDateTime(removeNullOrUndefined(data_obj.ReplyTime));
                                vm.Title = removeNullOrUndefined(data_obj.Title);
                                vm.Info = removeNullOrUndefined(data_obj.Info);
                                vm.ReplyInfo = removeNullOrUndefined(data_obj.ReplyInfo);
                                vm.BagID = removeNullOrUndefined(data_obj.BagID);
                            }).catch(error => {
                                alert(error);
                            });

                        },
                        // 提交表单
                   check_form: function (act) {
                           if (!vm.ID) {
                               alert('ID不能为空！');
                               return false;
                           }
                            var modal = '';
                            var sendData = new FormData();
                            var sendUrl = '';
                            if (act == 'delete') {
                                modal = $('#delModal');
                                sendUrl = '@Url.Action("Delete", "Complaint")';
                                sendData.append('ID', vm.ID);
                                sendData.append('Action', act);


                            }
                            else
                            {
                                modal = $('#updateModal');
                                sendUrl = '@Url.Action("Update", "Complaint")';
                                sendData.append('ID', vm.ID);
                                sendData.append('Action', act);
                                sendData.append('Info', vm.Info);
                                sendData.append('ReplyInfo', vm.ReplyInfo);
                                sendData.append('BagID', vm.BagID);

                              }



                            //console.log(sendData);
                            // 异步提交数据到action/GetBagItemByID页面
                            axios({
                                url: sendUrl,
                                method: "post",
                                responseType: 'json',
                                data: sendData,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],

                            }).then((data) => {
                                //console.log(data);
                                // 将JSON编码的字符串转换为JS对象

                                if (data.data > 0) {
                                 
                                    commonUtil.message('成功',act + "OK！",'success');
                                    modal.modal('hide');
                                    this.changePage(this.page);
                                }
                                else {
                                    alert('操作失败');
                                    modal.modal('hide');
                                }
                            }).catch(error => {
                                alert(error);
                            });

                    },


                    changePage: function (page) {

                        formdata = new FormData();
                        formdata.append("pageNum", page);
                        formdata.append("action", $('#act').val());
                        //console.log(formdata);
                        axios({
                                method: "post",
                            responseType: 'json',
                            data: formdata,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("ChangePage","Complaint")"
                        }).then((data) => {
                            //console.log(data.data);
                                data = JSON.parse(data.data);

                            this.page = page;
                            this.totalPages = parseInt(data.totalPages) ;
                                //console.log(this.totalPages);
                                this.complaints = JSON.parse(data.data);
                                //console.log(managers);
/*                                vm.$forceUpdate();*/
                                //this.FillTable(data);
                            }).catch(error => {
                                alert(error);
                            });

                    }
                },
                watch: {
                    //userName: {
                    //    deep: true,
                    //    handler(obj) {
                    //        console.log(obj);
                    //    }
                    //},

               },
               mounted: function(){
                   this.changePage(0);
               },
               created() {
                   var act = $('#act').val()
                    $('#updateModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        //console.log($('#act').val());
                        if (act != 'keep') {
                            changePage(0);
                            //location.reload();
                        }
                    });
                    $('#delModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        if (act != 'keep') {
                            //location.reload();
                            changePage(0);
                        }

                    });

                }
            });

            </script>
        }
